<template>
    <div class="dashboard-container">

      <!-- 顶部操作栏 -->
      <div class="search">
        <el-form :inline="true" class="left">
          <el-form-item>
            <el-button type="primary" @click="handleAdd('create')">
              <i class="el-icon-plus"></i>
              新增
            </el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="danger" @click="getData">
              <i class="el-icon-delete-solid"></i>
              删除
            </el-button>
          </el-form-item> -->
        </el-form>
        <el-form :inline="true" :model="params" class="right">
          <el-form-item>
            <el-input placeholder="请输入类型名称" v-model="params.name" clearable></el-input>
          </el-form-item>
          <el-form-item prop="propertyType">
            <el-select 
              placeholder="请选择资产类型" 
              v-model="params.propertyType" 
              style="width: 100%;" 
              filterable
              clearable
            >
              <el-option v-for="item in TARGET_TYPE_LIST" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="ObjectType">
            <el-select 
              placeholder="请选择对象类型" 
              v-model="params.objectType" 
              style="width: 100%;" 
              filterable
              clearable
            >
              <el-option v-for="item in OBJECT_TYPE_LIST" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="handleSearch">
              查询
              <i class="el-icon-search"></i>
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 内容栏 -->
      <div class="body">

        <!-- 列表 -->
        <el-table :data="list" v-loading="loading">
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="类型名称" prop="name"></el-table-column>
          <el-table-column label="控件类型" prop="showTypeName"></el-table-column>
          <el-table-column label="值类型" prop="valueTypeName"></el-table-column>
          <el-table-column label="资产类型" prop="propertyTypeName"></el-table-column>
          <el-table-column label="对象类型" prop="objectTypeName"></el-table-column>
          <el-table-column label="模板">
            <template slot-scope="{row}">
              {{ row.templateFlag == 1? '是': '否' }}
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="valueUnit"></el-table-column>
          <el-table-column label="排序值" prop="sortValue"></el-table-column>
          <el-table-column label="必填">
            <template slot-scope="{row}">
              {{ row.requiredFlag == 1? '是': '否' }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-button type="text" @click="handleAdd('update', row)">
                <i class="el-icon-edit-outline"></i>
                编辑
              </el-button>
              <el-button type="text danger" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageIndex+1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pageCount"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

      </div>

      <!-- 新增、编辑 -->
      <el-dialog 
        :visible.sync="dialogVisible" 
        :close-on-click-modal="false"
        @close="dialogVisible=false"
        :title="dialogType=='create'?'创建类型':'编辑类型'"
        width="600px"
      >
        <el-form ref="form" :rules="rules" :model="temp" label-width="100px">
          <el-form-item label="对象类型" prop="objectType" >
            <el-select 
              placeholder="请选择对象类型" 
              v-model="temp.objectType" 
              style="width: 100%;" filterable clearable
              :disabled="dialogType!='create'"
            >
              <el-option v-for="item in OBJECT_TYPE_LIST" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资产类型" prop="propertyType" v-if="temp.objectType==3||temp.objectType==8">
            <el-select 
              placeholder="请选择资产类型" 
              v-model="temp.propertyType" 
              style="width: 100%;" 
              filterable
              @change="handleChangePropertyType"
              :disabled="dialogType!='create'"
            >
              <el-option v-for="item in TARGET_TYPE_LIST" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" prop="name" >
            <el-input 
              placeholder="请输入名称" 
              v-model="temp.name"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="控件类型" prop="showType">
            <el-select 
              placeholder="请选择控件类型" 
              v-model="temp.showType" 
              style="width: 100%;" filterable clearable
              :disabled="dialogType!='create'"
            >
              <el-option v-for="item in UI_TYPE_LIST" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据类型" prop="valueType">
            <el-select 
              placeholder="请选择数据类型" 
              v-model="temp.valueType" 
              style="width: 100%;" filterable clearable
              :disabled="dialogType!='create'"
            >
              <el-option v-for="item in DATA_TYPE_LIST" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="枚举类型" prop="enumId" v-if="temp.valueType==4&&temp.propertyType!=null" required>
            <el-select 
              placeholder="请选择枚举类型" 
              v-model="temp.enumId" 
              style="width: 100%;" 
              filterable clearable
              :disabled="dialogType!='create'"
            >
              <el-option v-for="item in enumList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="必填" prop="requiredFlag" required>
            <el-radio v-model="temp.requiredFlag" :label="1" >是</el-radio>
            <el-radio v-model="temp.requiredFlag" :label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="单位" prop="valueUnit">
            <!-- <el-input placeholder="请输入单位" v-model="temp.valueUnit"></el-input> -->
             <el-select filterable v-model="temp.valueUnit" allow-create :create-method="createNewOption" placeholder="清选择" style="width: 100%;">
              <el-option v-for="item,index in UNIT_LIST" :label="item" :value="item" :key="index"></el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="排序值" prop="sortValue">
            <el-input type="number" placeholder="请输入排序值" v-model="temp.sortValue"></el-input>
          </el-form-item>
          <el-form-item label="模版字段" prop="templateFlag" required>
            <el-radio v-model="temp.templateFlag" :label="1" >是</el-radio>
            <el-radio v-model="temp.templateFlag" :label="0">否</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit('form')">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
</template>
  
<script>
import { mapGetters } from 'vuex'
import { fieldCreate, fieldUpdate, fieldGetList, fieldDelete } from '@/api/field'
import { enumGetList } from '@/api/enum'
import { UI_TYPE_LIST, DATA_TYPE_LIST,TARGET_TYPE_LIST,OSS_BASE_URL, OBJECT_TYPE_LIST, UNIT_LIST } from '@/utils/common'
import { transfromData } from '@/utils/tools'
  
export default {
    name: 'Stafffield',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        UI_TYPE_LIST, DATA_TYPE_LIST,TARGET_TYPE_LIST,OSS_BASE_URL,OBJECT_TYPE_LIST,
        rules: {
          name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
          showType: [{ required: true, message: '请选择控件类型', trigger: 'blur' }],
          valueType: [{ required: true, message: '请选择数据类型', trigger: 'blur' }],
          propertyType: [{ required: true, message: '请选择对象类型', trigger: 'blur' }]
        },
        params: {
          pageCount: 10,
          pageIndex: 0,
          name: '',
          propertyType: ''
        },
        total: 0,
        list: [],
        dialogVisible: false,
        dialogType: 'create',
        temp: {
          enumName: '',
          name: '',
          requiredFlag: 1,
          showType: '',
          sortValue: 0,
          objectType: 3,
          propertyType: null,
          valueType: '',
          valueUnit: '',
          templateFlag: 0
        },
        loading: false,
        enumList: [],
        UNIT_LIST
      }
    },
    mounted(){
      this.handleSearch();
      
    },
  
    methods:{
      //新增选项
      createNewOption(query){
        // 允许用户输入任何内容，如果该输入不在选项中
        this.UNIT_LIST.push(query);
        this.temp.valueUnit = query;  // 将输入值绑定到 v-model
      },
      //修改值
      async handleChangePropertyType(val){
        // 获取评估对象的枚举类型
        let data = await enumGetList({pageCount: 9999, propertyType: val, objectType: this.temp.objectType})
        this.enumList = data.list.map(item=>{
          return { label: item.name, value: item.id }
        })
        // 每次获取重置一下选择
        this.temp.enumName = ""
      },
      // 点击删除
      handleDelete(id){
        this.$confirm('此操作将永久删除该类型, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await fieldDelete({ id })
          this.getData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //提交表单
      submit(formName){
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let temp = JSON.parse(JSON.stringify(this.temp));
            if(temp.propertyType==null){
              delete temp.propertyType;
            }
            if(this.dialogType =='create'){
              await fieldCreate(temp)
              this.$message.success('创建成功')
            }else{
              await fieldUpdate(temp)
              this.$message.success('修改成功')
            }
            this.handleSearch();
            this.dialogVisible = false;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 点击新增、编辑
      handleAdd(type, row){
        this.dialogType = type;
        this.dialogVisible = true;
        if(type=='create'){
          this.temp = {
            enumName: '',
            name: '',
            requiredFlag: 0,
            showType: '',
            sortValue: 0,
            objectType: 3,
            propertyType: null,
            valueType: '',
            valueUnit: '',
            templateFlag: 0
          }
        }else{
          this.temp = JSON.parse(JSON.stringify(row))
          if(this.temp.enumId){
            this.handleChangePropertyType(this.temp.propertyType)
          }
        }
      },
      //修改搜索条件
      handleSearch(){
        this.params.pageIndex = 0;
        this.getData();
      },
      //加载列表数据
      async getData(){
        this.loading = true
        let data = await fieldGetList(this.params)
        this.loading = false;
        this.total = data.totalCount;
        this.list = data.list.map(item=>{
          item.showTypeName = transfromData(UI_TYPE_LIST, item.showType)
          item.valueTypeName = transfromData(DATA_TYPE_LIST, item.valueType)
          item.propertyTypeName = transfromData(TARGET_TYPE_LIST, item.propertyType)
          item.objectTypeName = transfromData(OBJECT_TYPE_LIST, item.objectType)
          return item;
        });
      },
      // 修改每页数量
      handleSizeChange(val){
        this.params.pageIndex = 0;
        this.params.pageCount = val;
        this.getData();
      },
      // 切换分页
      handleCurrentChange(val){
        this.params.pageIndex = val - 1;
        this.getData();
      }
    }
}
</script>
  
<style lang="scss" scoped>
.dashboard {
    &-container {
      margin: 30px;
      position: relative;
      .right{
        position: absolute;
        right: 0;
        top: 0;
      }

      .page{
        padding: 20px 0;
        text-align: center;
      }
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
}
</style>
  